<template>
	<div class="agreement-container">
		<div class="agreement-content">
			<h2 class="agreement-title">创意宝AI产品用户协议</h2>
			
			<!-- 前言部分 -->
			<div class="agreement-section">
				<div class="text-block">欢迎您使用创意宝AI产品及相关服务！</div>
				<div class="text-block">感谢您使用我们的产品和/或服务（下称"服务"）。</div>
				<div class="text-block">
					您使用我们的服务即表示您已同意本服务协议。请仔细阅读并透彻理解本服务协议内容，特别是免除或者限制责任的条款，我们将以加粗形式提醒您注意。
					本协议适用于所有创意宝AI产品/服务，包括本协议期限内的您所使用的各项服务和产品的升级和更新。阅读本协议的过程中，如果您不同意本协议或其中任何条款约定，请您立即停止使用我们的服务。
				</div>
			</div>

			<!-- 章节部分 -->
			<div class="agreement-section">
				<h3 class="section-title">一、服务的内容及形式</h3>
				<div class="section-content">
					<h4 class="sub-title">1.1 服务内容</h4>
					<div class="text-block">
						创意宝AI产品是陕西星火际元信息科技有限公司（以下简称为"星际科技"）依据技术创新推出的"AI作画"产品，旨在提供文生图及相关功能，致力于启发画师、设计师、艺术家等专业视觉内容创作者的灵感，
						辅助其进行艺术创作，还能为媒体、作者等文字内容创作者提供高质量、高效率的配图提供灵和做出贡献。同时为大众用户提供了一个零门槛绘画创作平台，让每个人都能展现个性化格调，享受艺术创作的乐趣。
					</div>
				</div>
			</div>

			<!-- 重要条款使用特殊样式 -->
			<div class="agreement-section">
				<div class="important-clause">
					<strong>
						您可以为非商业目的在单一台终端设备上安装、使用、显示、运行本产品。未经星际科技的事先书面授权和许可，您不得进行商业性的销售、复制、散发或其他商业活动，例如软件预装和捆绑等。
					</strong>
				</div>
			</div>

			<!-- 列表样式 -->
			<div class="agreement-section">
				<div class="list-content">
					<div class="list-item">（1）要善于网上学习，不浏览不良信息；</div>
					<div class="list-item">（2）要诚实友好交流，不侮辱欺诈他人；</div>
					<div class="list-item">（3）要增强自护意识，不随意约会网友；</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.agreement-container {
	padding: 20px;
	margin-top: 56px;
	background-color: #fff;
	min-height: 100vh;

	.agreement-content {
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
	}

	.agreement-title {
		font-size: 24px;
		font-weight: 600;
		text-align: center;
		margin-bottom: 30px;
		color: #333;
	}

	.agreement-section {
		margin-bottom: 24px;

		.section-title {
			font-size: 20px;
			font-weight: 600;
			color: #333;
			margin-bottom: 16px;
		}

		.sub-title {
			font-size: 18px;
			font-weight: 500;
			color: #444;
			margin: 12px 0;
		}

		.text-block {
			font-size: 14px;
			line-height: 1.8;
			color: #666;
			margin-bottom: 12px;
			text-align: justify;
		}
	}

	.important-clause {
		background-color: #f8f9fa;
		padding: 16px;
		border-left: 4px solid #409EFF;
		margin: 16px 0;

		strong {
			color: #333;
			font-weight: 500;
		}
	}

	.list-content {
		padding-left: 20px;

		.list-item {
			font-size: 14px;
			line-height: 1.8;
			color: #666;
			margin-bottom: 8px;
			position: relative;

			&::before {
				content: "•";
				position: absolute;
				left: -15px;
				color: #409EFF;
			}
		}
	}
}

// 响应式设计
@media screen and (max-width: 768px) {
	.agreement-container {
		padding: 10px;

		.agreement-content {
			padding: 10px;
		}

		.agreement-title {
			font-size: 20px;
		}

		.section-title {
			font-size: 18px;
		}

		.sub-title {
			font-size: 16px;
		}
	}
}
</style>